<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="text" id="input">
        <span id="text"></span>
    </div>
    <script>
        // Object.defineProperty用法
        // var obj={}
        // Object.defineProperty(obj,'name',{
        //     // get是负责拦截
        //     get:function(){
        //         console.log('获取值的');
        //     },
        //     // set负责发送
        //     set:function(newVal){
        //         console.log('设置值的');
        //     }
        // })
        // obj.name//获取值，会被监听到 
        // obj.name='11'//设置值也会被监听到

        // 监听的是单个属性-页面会数据改变
        // var obj={}
        // // 监测name属性
        // Object.defineProperty(obj,'name',{
        //     get(){
        //         console.log('获取值的');
        //     },
        //     // set负责发送
        //     set(newVal){
        //         console.log('设置值的');
        //         // 再赋值
        //         document.getElementById('text').innerHTML=newVal
        //     }
        // })
        // // 原生实现v-model要写在外面
        // let obj={};
        // // 监听哪个属性 get和set
        // Object.defineProperty(obj,'name',{
        //     // 当设置值的时候能立马监听到
        //     set:function(newVal){
        //         console.log('设置值数据劫持',newVal);
        //     },
        //     // 当获取值的时候能立马监听到
        //     get:function(val){
        //         console.log('获取值数据劫持',val);
        //     },
        // })
        // document.addEventListener('input',(e)=>{
        //     // console.log(e.target.value);//事件对象
        //     // let value=e.target.value
        //     // 找到对象往他里面写值
        //     // document.getElementById('text').innerHTML=value
        //     obj.name=e.target.value
        // })

        // vue3双向数据绑定
        var obj={}
        var obj1=new Proxy(obj,{
            get:function(target,key,receive){
                // 返回该属性值
                return target[key]
            },
            set:function(target,key,newVal,receive){
                // 赋值
                console.log('整个对象',target);
                target[key]=newVal
                document.getElementById('text').innerHTML=target[key]
            }
        })
        document.addEventListener('input',function(e){
            console.log(obj1);
            obj1[0]=e.target.value
        })
    </script>
</body>
</html>